<template>
    <div style="text-align: center;margin:0 20px">
        <div style="margin-top: 150px">
            <div style="font-size: 25px;font-weight: bolder" >注册新用户</div>
            <label style="margin-top: 50px;font-size: 13px;color: gray">欢迎来到本系统</label>
        </div>
        <div style="margin-top: 50px">
            <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
                <el-form-item prop="username">
                    <el-input v-model="form.username" type="text" :maxlength="8" placeholder="用户名">
                        <template #prefix>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" :maxlength="16" placeholder="密码" >
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password_repeat">
                    <el-input v-model="form.password_repeat" type="password" placeholder="重复密码" >
                        <template #prefix>
                            <el-icon><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="email">
                    <el-input v-model="form.email" type="email" placeholder="电子邮箱">
                        <template #prefix>
                            <el-icon><Message /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-row :gutter="10">
                        <el-col :span="15">
                            <el-input v-model="form.code" type="text" :maxlength="4" placeholder="验证码">
                                <template #prefix>
                                    <el-icon><BellFilled /></el-icon>
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-button @click="sendValidateEmail" type="success" :disabled="!isEmailValid || codeTime>0">
                                {{codeTime>0 ? '请在'+codeTime+'秒后重试' : '发送验证邮件'}}
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="register" style="margin-top:80px;width: 150px" type="warning" plain>光速注册</el-button>
            </div>
            <div style="margin-top: 20px">
                <span style="font-size: 14px;color: #72767b">已有账号？</span>
                <el-link type="primary" @click="router.push('/')">立即登录</el-link>
            </div>
        </div>
    </div>
</template>

<script setup>
import {defineComponent, reactive, ref} from "vue";
import {Lock, User,Message,BellFilled} from "@element-plus/icons-vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import {post} from "@/net";


// 数据绑定
const form  = reactive({
    username:'',
    password:'',
    password_repeat:'',
    email:'',
    code:''
})

const codeTime = ref(0)

//设置校验规则
//自定义校验规则
const validateUsername = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
        callback(new Error('用户名只能是中文、英文且无特殊字符'))
    } else {
        callback()
    }
}
const validatePasswordRepeat = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请重新输入密码'))
    } else if (value !== form.password) {
        callback(new Error("两次密码输入不一致"))
    } else {
        callback()
    }
}
const validatePassword = (rule, value, callback) => {
    //这里多余了，type为password的表单本身就不能输入中文
    if (/[\u4e00-\u9fa5]/.test(value)){
        callback(new Error('密码不能有中文'))
    } else {
        callback()
    }
}


const isEmailValid = ref(false)
const onValidate =(prop,isValid)=>{
    if (prop === 'email'){
        isEmailValid.value = isValid
    }
}
const rules = {
    username:[
        { validator: validateUsername , trigger: ['blur','change'] },
        { min: 2, max: 8, message: 'Length should be 2 to 8', trigger: ['blur','change'] },
    ],

    password:[
        { validator: validatePassword , trigger: ['blur','change'] },
        { required:true, message:'请输入密码', trigger:['blur','change']},
        { min: 6, max: 10, message: 'Length should be 6 to 16', trigger: ['blur','change'] },
    ],

    password_repeat:[
        { validator: validatePasswordRepeat , trigger: ['blur','change'] },
    ],

    email:[
        {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur',
        },
        {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
        },
    ],

    code:[
        {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
        }
    ]
}

const formRef = ref()
const register = () =>{
    formRef.value.validate((isValid)=>{
        if (isValid){
            post("/api/auth/register",{
                username:form.username,
                password:form.password,
                email:form.email,
                code:form.code
            },(massage)=>{
                //注册成功的回调函数
                ElMessage.success(massage)
                router.push('/')
            })
        }else {
            ElMessage.warning("请完整填写表单内容！")
        }
    })
}

const sendValidateEmail = () =>{
    // 设置定时器，一分钟可以发送验证码
    codeTime.value = 60
    post('/api/auth/valid-register-email',{
        email:form.email
    },(message)=>{
        ElMessage.success(message)
        setInterval(()=>codeTime.value--,1000)
    })
}

</script>
<style scoped>

</style>